<template>
  <div class="goodsInfoContainer">
    <div class="goodsname">{{ goodsname }}</div>
    <div class="goodsNum">剩余数量：{{ goodsnum }}</div>
    <div class="price">
      <div class="pre">原价：￥{{ preprice }}</div>
      <div class="cur">现价：￥{{ curprice }}</div>
    </div>
    <div class="chart">
      联系方式：<span class="concatway">{{ concatway }}</span>
    </div>
    <div class="buyGoodsNum">
      购买数量：
      <el-input-number
        v-model="buyGoodNum"
        :min="1"
        :max="goodsnum"
        label="描述文字"
      />
    </div>
    <div class="buy">
      <div class="handleBuy" @click="handleBuy">点击购买</div>
      <div
        :class="['addShopping', isShopping ? 'active' : '']"
        @click="addShopping"
      >
        加入购物车
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addShoppingData, addOrdersData, updateGoodsNum } from "@/utils/api";
export default {
  props: {
    goodsname: String,
    curprice: Number,
    preprice: Number,
    goodsnum: Number,
    concatway: String,
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      buyGoodNum: 0,
      isHandleAdd: false,
    };
  },
  computed: {
    gid() {
      return this.$route.query.gid;
    },
    uid() {
      return sessionStorage.getItem("uid");
    },
    isShopping() {
      return (
        this.isHandleAdd ||
        !!sessionStorage.getItem(`${this.uid}-${this.gid}-add`)
      );
    },
    isAdmin() {
      return sessionStorage.getItem("type") === "admin";
    },
    ...mapState(["shoppingCount"]),
  },
  methods: {
    async addShopping() {
      // 添加购物车
      if (this.isAdmin) {
        this.$message.error("请登入学生账号，管理员账号不提供该功能！！");
        return;
      }
      if (!this.isShopping) {
        try {
          let data = this.$props.info;
          await addShoppingData({
            shopping: JSON.stringify(data),
          });
          this.$store.commit("addShoppingCart");
          // 设置为true
          sessionStorage.setItem(`${this.uid}-${this.gid}-add`, true);
          sessionStorage.setItem(
            `${this.uid}-shoppingCount`,
            this.shoppingCount
          );
          this.isHandleAdd = true;
          this.$message.success("添加购物车成功！！");
        } catch (err) {
          this.$message.error(err.message);
        }
      } else {
        this.$message.warning("改商品已经到收藏夹，请勿重复添加！！");
      }
    },
    async handleBuy() {
      if (this.isAdmin) {
        this.$message.error("请登入学生账号，管理员账号不提供该功能！！");
        return;
      }
      let that = this;
      // 点击购买
      const loading = this.$loading({
        lock: true,
        text: "订单生成中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = {
        ...that.$props.info,
        goodsnum: 1,
        buyid: parseInt(that.uid),
      };
      let data2 = {
        ...that.$props.info,
        goodsnum: that.$props.info.goodsnum - 1,
      };
      console.log(data);
      await addOrdersData({
        orders: JSON.stringify(data),
      });
      await updateGoodsNum({
        goods: JSON.stringify([data2]),
      });
      setTimeout(() => {
        loading.close();
        that.$router.push("/home/buyOrders");
      }, 1500);
    },
  },
};
</script>

<style lang="less" scoped>
.goodsInfoContainer {
  flex: 1;
  padding: 20px;
  .goodsname {
    font-size: 20px;
    font-weight: 550;
  }
  .goodsNum {
    font-size: 12px;
    color: #666;
    text-align: right;
  }
  .price {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cur {
      color: #ff4f00;
      font-size: 20px;
    }
    .pre {
      color: #666;
      text-decoration: line-through;
    }
  }
  .chart {
    margin-top: 50px;
    .concatway {
      font-size: 14px;
    }
  }
  .buyGoodsNum {
    margin-top: 50px;
  }
  .buy {
    margin-top: 50px;
    display: flex;
    .handleBuy {
      width: 150px;
      height: 38px;
      text-align: center;
      line-height: 40px;
      background: #ffeded;
      color: red;
      border: 1px solid red;
    }
    .addShopping {
      margin-left: 30px;
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: red;
      color: #fff;
    }
    :hover {
      cursor: pointer;
    }
    .active {
      background: #f3a3a3;
      cursor: not-allowed;
    }
  }
}
</style>